<template>
    <ul class="clearfix">
      <li class="goods" v-for="(item, index) in datas" :key="index">
        <div class="goods-news" :style="{'backgroundColor': item.bgc}">
          <img  :src= "item.img">
          <p>{{item.text}}</p>
        </div>
        <p class="desc">{{item.goodsDesc}}</p>
      </li>
    </ul>
</template>

<script>
export default {
  name: 'goodsUl',
  props: ['datas']
}
</script>

<style scoped>
@import "../../assets/style/common.css";
.goods{
  float: left;
  list-style: none;
  width:25%;
  padding-top: 10px;
}
.goods-news{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: #fff;
  background-color: skyblue;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
}
.goods-news img{
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.goods-news p {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
}
.desc {
  color: #000;
  padding: 5px 0;
  text-align: center;
}
</style>
